<template>
	<view class="interact">
		<!-- 顶部功能区 -->
		<view class="header">
			<view class="search-box">
				<uni-icons type="search" size="16" color="#999" />
				<input type="text" placeholder="搜索帖子或话题" v-model="searchKey" @confirm="handleSearch" />
			</view>
			<view class="filter-tabs">
				<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === tab.id }]"
					@click="switchTab(tab.id)">
					{{tab.name}}
				</view>
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 异宠分类三级选项卡 -->
			<view class="exotic-tabs" v-if="currentTab === 'exotic'">
				<!-- 第一级：异宠类别 -->
				<scroll-view scroll-x class="category-scroll" :show-scrollbar="false">
					<view class="category-list">
						<view v-for="(category, index) in exoticCategories" :key="category.id"
							:class="['category-item', { active: currentExoticCategory === category.id }]"
							@click="selectCategory(category)">
							{{category.name}}
						</view>
					</view>
				</scroll-view>

				<!-- 第二级：具体宠物 -->
				<scroll-view scroll-x class="pet-scroll" :show-scrollbar="false">
					<view class="pet-list">
						<view v-for="pet in getCurrentCategoryPets" :key="pet.id"
							:class="['pet-item', { active: currentPet === pet.id }]" @click="selectPet(pet)">
							{{pet.name}}
						</view>
					</view>
				</scroll-view>

				<!-- 第三级：饲养指南 -->
				<scroll-view scroll-x class="guide-scroll" :show-scrollbar="false">
					<view class="guide-list">
						<view v-for="(guide, index) in getCurrentPetGuides" :key="index"
							:class="['guide-item', { active: currentGuide === guide }]" @click="selectGuide(guide)">
							{{guide}}
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 帖子列表 -->
			<view class="post-list">
				<view v-for="(post, index) in posts" :key="post._id" class="post-item">
					<!-- 用户信息 -->
					<view class="user-info">
						<image class="avatar" :src="post.userInfo.avatar" mode="aspectFill" />
						<view class="user-detail">
							<text class="nickname">{{post.userInfo.nickname}}</text>
							<uni-dateformat :date="Number(post.createTime)" format="yyyy-MM-dd" :threshold="[60000, 3600000]"></uni-dateformat>
						</view>
						<view class="follow-btn" v-if="!post.isFollowing" @click="handleFollowUser(post.userInfo._id)">
							关注
						</view>
						<view class="follow-btn followed" v-else>
							已关注
						</view>
					</view>

					<!-- 帖子内容 -->
					<view class="post-content">
						<text class="text">{{post.content}}</text>
						<view class="image-list" v-if="post.images && post.images.length">
							<image v-for="(img, imgIndex) in post.images" :key="imgIndex" :src="img" mode="aspectFill"
								@click="previewImage(post.images, imgIndex)" />
						</view>
					</view>

					<!-- 标签 -->
					<view class="tags" v-if="post.tags && post.tags.length">
						<text v-for="(tag, tagIndex) in post.tags" :key="tagIndex" class="tag">#{{tag}}</text>
					</view>

					<!-- 互动栏 -->
					<view class="interaction-bar">
						<view class="action-item" @click="handleLikeClick(post)">
							<uni-icons :type="post.isLiked ? 'heart-filled' : 'heart'" size="20"
								:color="post.isLiked ? '#ff4d4f' : '#666'" />
							<text :class="['count', { active: post.isLiked }]">{{post.likeCount}}</text>
						</view>
						<view class="action-item" @click="showCommentInput(post)">
							<uni-icons type="chat" size="20" color="#666" />
							<text class="count">{{post.commentCount}}</text>
						</view>
						<view class="action-item" @click="collectPost(post)">
							<uni-icons :type="post.isCollected ? 'star-filled' : 'star'" size="20"
								:color="post.isCollected ? '#ffd700' : '#666'" />
							<text :class="['count', { active: post.isCollected }]">{{post.collectionCount}}</text>
						</view>
						<view class="action-item" @click="sharePost(post)">
							<uni-icons type="redo" size="20" color="#666" />
						</view>
					</view>
				</view>

				<!-- 加载更多 -->
				<view class="loading-more" v-if="isLoading">
					<view class="loading-icon"></view>
					<text>加载中...</text>
				</view>
				<view class="no-more" v-else-if="!hasMore">
					<text>没有更多了</text>
				</view>
			</view>
		</view>

		<!-- 发帖按钮 -->
		<view class="post-btn" @click="showPostModal" v-if="!showComment">
			<uni-icons type="plus" size="24" color="#fff" />
		</view>

		<!-- 发帖弹窗 -->
		<uni-popup ref="postPopup" type="bottom">
			<view class="post-modal">
				<view class="modal-header">
					<text>发布帖子</text>
					<uni-icons type="close" size="20" @click="closePostModal" />
				</view>
				<view class="modal-content">
					<textarea v-model="postContent" placeholder="分享你的养宠经验..." :maxlength="500" />
					<view class="image-uploader">
						<view v-for="(img, index) in postImages" :key="index" class="image-item">
							<image :src="img" mode="aspectFill" />
							<view class="delete-btn" @click="deleteImage(index)">
								<uni-icons type="close" size="16" color="#fff" />
							</view>
						</view>
						<view class="upload-btn" @click="chooseImage" v-if="postImages.length < 9">
							<uni-icons type="camera" size="24" color="#999" />
							<text>添加图片</text>
						</view>
					</view>
					<view class="tag-input">
						<text class="label">添加标签：</text>
						<view class="tag-list">
							<view v-for="(tag, index) in selectedTags" :key="index" class="tag">
								#{{tag}}
								<text class="delete" @click="removeTag(index)">×</text>
							</view>
						</view>
						<view class="input-group">
							<input type="text" v-model="newTag" placeholder="输入标签" @confirm="addTag" />
							<button class="add-btn" @click="addTag">添加</button>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="submit-btn" @click="submitPost">发布</button>
				</view>
			</view>
		</uni-popup>

		<!-- 评论输入框 -->
		<view class="comment-input" v-if="showComment">
			<view class="comment-header">
				<text class="title">评论 ({{currentPost.commentCount}})</text>
				<text class="close" @click="closeComment">×</text>
			</view>
			<scroll-view class="comment-list" scroll-y @scrolltolower="loadMoreComments" v-if="comments.length > 0">
				<view v-for="(comment, index) in displayComments" :key="index" class="comment-item">
					<image class="avatar" :src="comment.userInfo.avatar" mode="aspectFill" />
					<view class="comment-content">
						<view class="comment-user">
							<text class="nickname">{{comment.userInfo.nickname}}</text>
							<uni-dateformat :date="Number(comment.createTime)" format="yyyy-MM-dd hh:mm" :threshold="[60000, 3600000]"></uni-dateformat>
						</view>
						<text class="text">{{comment.content}}</text>
					</view>
				</view>
				<view v-if="comments.length > displayCount" class="show-more" @click="showMoreComments">
					<text>显示更多评论</text>
				</view>
				<view v-if="hasMoreComments" class="loading-more">
					<text>加载中...</text>
				</view>
			</scroll-view>
			<view class="comment-input-box">
				<input type="text" v-model="commentContent" placeholder="说点什么..." @confirm="submitComment" />
				<text class="submit" @click="submitComment">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { fetchAndCacheFollowFansCount } from '@/utils/followCache'
	
	export default {
		data() {
			return {
				userInfo: null,
				searchKey: '',
				needRefresh: false,
				tabs: [{
						id: 'hot',
						name: '热门'
					},
					{
						id: 'new',
						name: '最新'
					},
					{
						id: 'exotic',
						name: '异宠圈'
					},
					{
						id: 'follow',
						name: '关注'
					}
				],
				currentTab: 'hot',
				posts: [],
				page: 1,
				pageSize: 10,
				hasMore: true,
				isRefreshing: false,
				showComment: false,
				currentPost: null,
				commentContent: '',
				// 发帖相关
				postContent: '',
				postImages: [],
				selectedTags: [],
				newTag: '',
				comments: [],
				commentPage: 1,
				commentPageSize: 20,
				hasMoreComments: true,
				showAllComments: false,
				displayCount: 5,
				// 异宠分类数据
				exoticCategories: [{
						id: 'reptile',
						name: '爬行类',
						pets: [{
								id: 'gecko',
								name: '守宫'
							},
							{
								id: 'snake',
								name: '蛇类'
							},
							{
								id: 'turtle',
								name: '龟类'
							}
						]
					},
					{
						id: 'amphibian',
						name: '两栖类',
						pets: [{
								id: 'frog',
								name: '蛙类'
							},
							{
								id: 'salamander',
								name: '蝾螈'
							}
						]
					},
					{
						id: 'mammal',
						name: '小型哺乳类',
						pets: [{
								id: 'hamster',
								name: '仓鼠'
							},
							{
								id: 'chinchilla',
								name: '龙猫'
							}
						]
					},
					{
						id: 'bird',
						name: '鸟类',
						pets: [{
								id: 'parrot',
								name: '鹦鹉'
							},
							{
								id: 'finch',
								name: '雀类'
							}
						]
					},
					{
						id: 'insect',
						name: '昆虫类',
						pets: [{
								id: 'beetle',
								name: '甲虫'
							},
							{
								id: 'mantis',
								name: '螳螂'
							}
						]
					},
					{
						id: 'aquatic',
						name: '水生宠物类',
						pets: [{
								id: 'axolotl',
								name: '美西螈'
							},
							{
								id: 'crayfish',
								name: '观赏虾'
							}
						]
					}
				],
				// 添加通用饲养指南列表
				commonGuides: [
					'基础饲养',
					'环境布置',
					'食物选择',
					'日常护理',
					'健康管理',
					'繁殖知识',
					'疾病预防',
					'行为训练'
				],
				currentExoticCategory: null,
				currentPet: null,
				currentGuide: null,
				isLoading: false
			}
		},
		computed: {
			displayComments() {
				return this.comments.slice(0, this.displayCount)
			},
			// 获取当前类别的宠物列表
			getCurrentCategoryPets() {
				const category = this.exoticCategories.find(c => c.id === this.currentExoticCategory);
				return category ? category.pets : [];
			},
			// 获取通用饲养指南列表
			getCurrentPetGuides() {
				return this.commonGuides;
			}
		},
		onShow() {
			// 检查登录状态
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else {
							uni.switchTab({
								url: '/pages/home/home'
							})
						}
					}
				})
				return
			}
			this.userInfo = userInfo

			// 只在需要刷新时刷新
			if (this.needRefresh) {
				this.refresh()
				this.needRefresh = false
			}
		},
		onReachBottom() {
			this.loadMore()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			// 切换标签
			async switchTab(tabId) {
				if (this.currentTab === tabId) return
				this.currentTab = tabId
				this.page = 1
				this.posts = []
				this.hasMore = true
				await this.refresh()
			},
			// 搜索
			async handleSearch() {
				this.page = 1
				this.posts = []
				this.hasMore = true
				await this.refresh()
			},
			// 加载帖子列表
			async loadPosts() {
				try {
					// 重新获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo) {
						uni.showModal({
							title: '提示',
							content: '请先登录',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}
							}
						})
						return
					}
					this.userInfo = userInfo

					// 构建搜索条件
					const searchConditions = {
						type: this.currentTab,
						page: this.page,
						pageSize: this.pageSize,
						searchKey: this.searchKey,
						userId: userInfo.userId || userInfo._id
					}

					if (this.currentTab === 'exotic') {
						const category = this.exoticCategories.find(c => c.id === this.currentExoticCategory);
						const pet = category?.pets.find(p => p.id === this.currentPet);

						searchConditions.filters = {
							category: category?.name || '',
							pet: pet?.name || '',
							guide: this.currentGuide || ''
						}
					}

					const res = await uniCloud.importObject('post').getPosts(searchConditions)

					if (res.code === 0) {
						if (this.page === 1) {
							this.posts = res.data
						} else {
							this.posts = [...this.posts, ...res.data]
						}
						this.hasMore = res.data.length === this.pageSize
					} else {
						uni.showToast({
							title: res.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载帖子失败：', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},
			// 加载更多
			async loadMore() {
				if (this.isLoading || !this.hasMore) return

				try {
					this.isLoading = true
					this.page++
					await this.loadPosts()
				} finally {
					this.isLoading = false
				}
			},
			// 下拉刷新
			async refresh() {
				if (this.isLoading) return

				try {
					this.isLoading = true
					this.page = 1
					await this.loadPosts()
				} finally {
					this.isLoading = false
					// 完成下拉刷新
					uni.stopPullDownRefresh()
				}
			},
			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return ''
				const date = new Date(timestamp)
				const now = new Date()
				const diff = now - date

				if (diff < 60 * 1000) {
					return '刚刚'
				} else if (diff < 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 1000)) + '分钟前'
				} else if (diff < 24 * 60 * 60 * 1000) {
					return Math.floor(diff / (60 * 60 * 1000)) + '小时前'
				} else {
					return date.getFullYear() + '-' +
						String(date.getMonth() + 1).padStart(2, '0') + '-' +
						String(date.getDate()).padStart(2, '0')
				}
			},
			// 预览图片
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: images[current]
				})
			},
			// 关注用户
			async handleFollowUser(followeeId) {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.userId) {
						uni.navigateTo({ url: '/pages/login/login' })
						return
					}
					 const userObj = uniCloud.importObject('user',{
						customUI: true
					 })
					const res = await userObj.followUser({
						followerId: userInfo.userId,
						followeeId
					})
					if (res.code === 200) {
						uni.showToast({ title: '关注成功', icon: 'success' })
						this.posts = this.posts.map(post => {
							if (post.userInfo._id === followeeId) {
								post.isFollowing = true
							}
							return post
						})
						fetchAndCacheFollowFansCount(userInfo.userId)
					}
				} catch (error) {
					uni.showToast({ title: '操作失败', icon: 'none' })
				}
			},
			// 点赞/取消点赞按钮点击事件
			async handleLikeClick(post) {
				try {
					console.log('点赞')
					uni.showLoading({
						title: '点赞中...',
						mask: true
					});

					const result = await uniCloud.importObject('post').toggleLike({
						postId: post._id
					})

					if (result.errCode === 0) {
						// 更新帖子的点赞状态和点赞数
						post.isLiked = result.isLiked
						post.likeCount = result.likeCount
						//this.needRefresh = true
					} else {
						uni.showToast({
							title: result.errMsg || '操作失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('点赞操作失败：', error)
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none'
					})
				}
			},
			// 显示评论输入框
			async showCommentInput(post) {
				this.currentPost = post
				this.showComment = true
				this.commentPage = 1
				this.comments = []
				await this.loadComments()
			},
			// 加载评论列表
			async loadComments() {
				try {
					const res = await uniCloud.importObject('post').getComments({
						postId: this.currentPost._id,
						page: this.commentPage,
						pageSize: this.commentPageSize
					})

					if (res.errCode === 0) {
						if (this.commentPage === 1) {
							this.comments = res.data
						} else {
							this.comments = [...this.comments, ...res.data]
						}
						this.hasMoreComments = res.data.length === this.commentPageSize
					}
				} catch (error) {
					console.error('加载评论失败：', error)
					uni.showToast({
						title: '加载评论失败',
						icon: 'none'
					})
				}
			},
			// 加载更多评论
			async loadMoreComments() {
				if (this.hasMoreComments) {
					this.commentPage++
					await this.loadComments()
				}
			},
			// 提交评论
			async submitComment() {
				if (!this.commentContent.trim()) return
				try {
					await uniCloud.importObject('post').addComment({
						postId: this.currentPost._id,
						content: this.commentContent
					})
					this.currentPost.commentCount++
					this.commentContent = ''
					// 重新加载评论列表
					this.commentPage = 1
					await this.loadComments()
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					})
					this.needRefresh = true
				} catch (error) {
					if (error.message === 'Token不存在' || error.message === 'Token无效' || error.message === 'Token已过期') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						uni.showToast({
							title: '评论失败',
							icon: 'none'
						})
					}
				}
			},
			// 显示更多评论
			showMoreComments() {
				if (this.displayCount < this.comments.length) {
					this.displayCount += 5
				}
			},
			// 关闭评论输入框
			closeComment() {
				this.showComment = false
				this.commentContent = ''
				this.currentPost = null
				this.comments = []
				this.commentPage = 1
				this.displayCount = 5
			},
			// 收藏帖子
			async collectPost(post) {
				try {
					uni.showToast({
						title: '收藏中...',
						icon: 'none',
						duration: 2000,
						mask: true
					})

					const result = await uniCloud.importObject('post').toggleCollection({
						postId: post._id
					})

					if (result.errCode === 0) {
						// 使用原子操作更新收藏状态和计数
						post.isCollected = result.isCollected
						post.collectionCount = result.collectionCount // 使用服务器返回的最新计数
						this.needRefresh = true
					} else {
						uni.showToast({
							title: result.errMsg,
							icon: 'none'
						})
					}
				} catch (error) {
					if (error.message === 'Token不存在' || error.message === 'Token无效' || error.message === 'Token已过期') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						})
					}
				}
			},
			// 分享帖子
			sharePost(post) {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline'],
					success: () => {
						this.needRefresh = true
					}
				})
			},
			// 显示发帖弹窗
			showPostModal() {
				this.$refs.postPopup.open()
			},
			// 关闭发帖弹窗
			closePostModal() {
				this.$refs.postPopup.close()
				this.resetPostForm()
			},
			// 重置发帖表单
			resetPostForm() {
				this.postContent = ''
				this.postImages = []
				this.selectedTags = []
				this.newTag = ''
			},
			// 选择图片
			async chooseImage() {
				try {
					const res = await uni.chooseImage({
						count: 9 - this.postImages.length,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})
					this.postImages = [...this.postImages, ...res.tempFilePaths]
				} catch (error) {
					console.error('选择图片失败:', error)
				}
			},
			// 删除图片
			deleteImage(index) {
				this.postImages.splice(index, 1)
			},
			// 添加标签
			addTag() {
				if (!this.newTag.trim()) return
				if (this.selectedTags.length >= 5) {
					uni.showToast({
						title: '最多添加5个标签',
						icon: 'none'
					})
					return
				}
				if (this.selectedTags.includes(this.newTag)) {
					uni.showToast({
						title: '标签已存在',
						icon: 'none'
					})
					return
				}
				if (!Array.isArray(this.selectedTags)) {
					this.selectedTags = []
				}
				this.selectedTags.push(this.newTag.trim())
				this.newTag = ''
			},
			// 删除标签
			removeTag(index) {
				this.selectedTags.splice(index, 1)
			},
			// 提交帖子
			async submitPost() {
				if (!this.postContent.trim()) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}

				try {
					const uploadedImages = []
					for (const image of this.postImages) {
						const res = await uniCloud.uploadFile({
							filePath: image,
							cloudPath: `posts/${Date.now()}-${Math.random().toString(36).substr(2)}.jpg`
						})
						uploadedImages.push(res.fileID)
					}

					const tags = Array.isArray(this.selectedTags) ? this.selectedTags : []

					const postData = {
						content: this.postContent,
						images: uploadedImages,
						tags: tags
					}

					await uniCloud.importObject('post').createPost(postData)
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					})
					this.closePostModal()
					this.needRefresh = true
				} catch (error) {
					if (error.message === 'Token不存在' || error.message === 'Token无效' || error.message === 'Token已过期') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						uni.showToast({
							title: '发布失败',
							icon: 'none'
						})
					}
				}
			},
			// 选择异宠类别
			selectCategory(category) {
				this.currentExoticCategory = category.id;
				this.currentPet = null;
				this.currentGuide = null;
				this.page = 1; // 重置页码
				this.refresh();
			},

			// 选择具体宠物
			selectPet(pet) {
				this.currentPet = pet.id;
				this.currentGuide = null;
				this.page = 1; // 重置页码
				this.refresh();
			},

			// 选择饲养指南
			selectGuide(guide) {
				this.currentGuide = guide;
				this.page = 1; // 重置页码
				this.refresh();
			},
		},
		onLoad() {
			// 设置默认值
			this.currentExoticCategory = this.exoticCategories[0].id; // 默认选中第一个类别
			this.currentPet = this.exoticCategories[0].pets[0].id; // 默认选中第一个宠物
			this.currentGuide = this.commonGuides[0]; // 默认选中第一个饲养指南

			// 设置默认标签页
			this.currentTab = 'hot'; // 默认显示热门标签

			// 加载数据
			this.refresh();
		}
	}
</script>

<style lang="scss">
	.interact {
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.main-content {
		flex: 1;
		height: calc(100vh - 200rpx); // 减去header高度
	}

	.header {
		background: #fff;
		padding: 20rpx;
		position: sticky;
		top: 0;
		z-index: 100;

		.search-box {
			display: flex;
			align-items: center;
			background: #f5f5f5;
			padding: 16rpx 24rpx;
			border-radius: 32rpx;
			margin-bottom: 20rpx;

			input {
				flex: 1;
				margin-left: 12rpx;
				font-size: 28rpx;
			}
		}

		.filter-tabs {
			display: flex;
			justify-content: space-around;

			.tab-item {
				font-size: 28rpx;
				color: #666;
				padding: 12rpx 0;
				position: relative;

				&.active {
					color: #5cb85c;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #5cb85c;
						border-radius: 2rpx;
					}
				}
			}
		}
	}

	.post-list {
		padding: 20rpx;
		min-height: calc(100vh - 200rpx);
		background-color: #f5f5f5;
	}

	.post-item {
		background: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;

		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 16rpx;
			}

			.user-detail {
				flex: 1;

				.nickname {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-right: 12rpx;
					display: inline-block;
				}

				.time {
					font-size: 24rpx;
					color: #999;
					display: inline-block;
				}
			}

			.follow-btn {
				font-size: 26rpx;
				color: #5cb85c;
				padding: 8rpx 24rpx;
				border: 1px solid #5cb85c;
				border-radius: 24rpx;
			}

			.follow-btn.followed {
				background: #e0e0e0;
				color: #999;
				border: 1px solid #e0e0e0;
				cursor: not-allowed;
			}
		}

		.post-content {
			.text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 16rpx;
			}

			.image-list {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;

				image {
					width: 220rpx;
					height: 220rpx;
					border-radius: 8rpx;
				}
			}
		}

		.tags {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			margin: 16rpx 0;

			.tag {
				font-size: 24rpx;
				color: #5cb85c;
				background: rgba(92, 184, 92, 0.1);
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}

		.interaction-bar {
			display: flex;
			justify-content: space-around;
			padding-top: 20rpx;
			border-top: 1px solid #f5f5f5;

			.action-item {
				display: flex;
				align-items: center;

				.count {
					font-size: 24rpx;
					color: #666;
					margin-left: 8rpx;

					&.active {
						color: #ffd700;
					}
				}
			}
		}
	}

	.loading-more,
	.no-more {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 24rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;

		.loading-icon {
			width: 30rpx;
			height: 30rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #5cb85c;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.post-btn {
		position: fixed;
		right: 40rpx;
		bottom: calc(40rpx + env(safe-area-inset-bottom));
		width: 100rpx;
		height: 100rpx;
		background: #5cb85c;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(92, 184, 92, 0.3);
	}

	.post-modal {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f5f5f5;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.modal-content {
			padding: 30rpx;

			textarea {
				width: 100%;
				height: 200rpx;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.image-uploader {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				margin-bottom: 20rpx;

				.image-item {
					position: relative;
					width: 200rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.delete-btn {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						width: 40rpx;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.upload-btn {
					width: 200rpx;
					height: 200rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					text {
						font-size: 24rpx;
						color: #999;
						margin-top: 8rpx;
					}
				}
			}

			.tag-input {
				.label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;
					display: block;
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;
					margin-bottom: 16rpx;

					.tag {
						font-size: 24rpx;
						color: #5cb85c;
						background: rgba(92, 184, 92, 0.1);
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						display: flex;
						align-items: center;

						.delete {
							margin-left: 8rpx;
						}
					}
				}

				.input-group {
					display: flex;
					gap: 16rpx;
					align-items: center;

					input {
						flex: 1;
						height: 80rpx;
						background: #f5f5f5;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
					}

					.add-btn {
						width: 120rpx;
						height: 80rpx;
						background: #5cb85c;
						color: #fff;
						border-radius: 8rpx;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0;
						margin: 0;
					}
				}
			}
		}

		.modal-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #f5f5f5;

			.submit-btn {
				width: 100%;
				height: 80rpx;
				background: #5cb85c;
				color: #fff;
				border-radius: 40rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.comment-input {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		height: auto;

		.comment-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f5f5f5;
			flex-shrink: 0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.close {
				font-size: 40rpx;
				color: #999;
				padding: 0 20rpx;
				line-height: 1;
			}
		}

		.comment-list {
			flex: 1;
			padding: 20rpx;
			padding-bottom: 120rpx;
			max-height: calc(80vh - 200rpx);
			height: auto;
			overflow-y: auto;

			.comment-item {
				display: flex;
				margin-bottom: 30rpx;

				.avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 32rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}

				.comment-content {
					flex: 1;
					word-break: break-all;

					.comment-user {
						margin-bottom: 8rpx;

						.nickname {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							margin-right: 12rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}
					}

					.text {
						font-size: 28rpx;
						color: #333;
						line-height: 1.5;
					}
				}
			}

			.show-more {
				text-align: center;
				padding: 10rpx 0;
				color: #5cb85c;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.loading-more {
				text-align: center;
				padding: 10rpx 0;
				color: #999;
				font-size: 24rpx;
				margin-bottom: 10rpx;
			}
		}

		.comment-input-box {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-top: 1px solid #f5f5f5;
			background: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 100;
			height: 70rpx;

			input {
				flex: 1;
				height: 72rpx;
				background: #f5f5f5;
				border-radius: 36rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			.submit {
				font-size: 28rpx;
				color: #5cb85c;
			}
		}
	}

	.exotic-tabs {
		background: #fff;
		padding: 12rpx 0;

		.category-scroll,
		.pet-scroll,
		.guide-scroll {
			white-space: nowrap;
			padding: 0 16rpx;
			margin-bottom: 12rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.category-list,
			.pet-list,
			.guide-list {
				display: inline-flex;
				padding: 6rpx 0;

				.category-item,
				.pet-item,
				.guide-item {
					padding: 8rpx 20rpx;
					margin-right: 12rpx;
					font-size: 24rpx;
					color: #666;
					background: #f5f5f5;
					border-radius: 24rpx;
					transition: all 0.3s ease;
					line-height: 1.4;

					&.active {
						color: #fff;
						background: #5cb85c;
						box-shadow: 0 2rpx 6rpx rgba(92, 184, 92, 0.3);
						transform: translateY(-1rpx);
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.pet-scroll {
			.pet-item {
				background: rgba(92, 184, 92, 0.1);
				border: 1rpx solid rgba(92, 184, 92, 0.2);
				font-size: 22rpx;

				&.active {
					background: #5cb85c;
					border-color: #5cb85c;
				}
			}
		}

		.guide-scroll {
			.guide-item {
				background: rgba(92, 184, 92, 0.05);
				border: 1rpx solid rgba(92, 184, 92, 0.1);
				font-size: 22rpx;
				padding: 6rpx 16rpx;

				&.active {
					background: #5cb85c;
					border-color: #5cb85c;
				}
			}
		}
	}
</style>